//
// This file is part of INGInious. See the LICENSE and the COPYRIGHTS files for
// more information about the licensing of this file.
//

/* Mixins */
.blur(@size) {
    -webkit-filter: blur(@size);
    -moz-filter: blur(@size);
    -o-filter: blur(@size);
    -ms-filter: blur(@size);
    filter: blur(@size);
}

.transition(@transition) {
    -webkit-transition: @transition;
    -moz-transition: @transition;
    -ms-transition: @transition;
    -o-transition: @transition;
    transition: @transition;
}

.grayscale(@value: 1) {
    -webkit-filter: grayscale(@value);
    -moz-filter: grayscale(@value);
    -o-filter: grayscale(@value);
    -ms-filter: grayscale(@value);
    filter: grayscale(@value);
}

.custom_filter(@filter) {
    -webkit-filter: @filter;
    -moz-filter: @filter;
    -o-filter: @filter;
    -ms-filter: @filter;
    filter: @filter;
}

/* Fonts */
@import (css) url(//fonts.googleapis.com/css?family=Yanone+Kaffeesatz:300);
@import (css) url(//fonts.googleapis.com/css?family=Source+Code+Pro);

/* Progress bars */
.progress-bar[aria-valuenow] {
    line-height: 18px !important;
    min-width: 30px;
    color: #ffffff;
}

.progress-bar[aria-valuenow="0"] {
    background-color: transparent !important;
    color: #555555;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

/* Code elements */
pre {
    border: 1px solid #cccccc;
    padding: 10px;
}

input.monospace {
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}

/* Task submission form*/
form#task {
    .transition(all 0.3s ease-in-out);

    .form-blur {
        .blur(5px);
    }

    label {
        display: block;
    }
}

/* Task alert message (feedbacks...) */
#task_alert {
    position: relative;

    #ssh_remote_info {
        pre {
            &:before {
                content: "$ ";
            }
            -moz-user-select: all;
            -webkit-user-select: all;
            user-select: all;
            background-color: #f5f5f5;
        }
        code {
            -moz-user-select: all;
            -webkit-user-select: all;
            user-select: all;
            background-color: #f5f5f5;
            padding: 2px 4px;
        }
    }

    .kill-submission-btn {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 50px;
    }

    .loading-alert {
        padding-right: 50px;
    }

    #iframessh {
        width: 100%;
        height: 600px;
    }
}

#task_alert, .task_alert_problem {
    .card-body {
        p:last-child {
            margin-bottom: 0;
        }

        .close {
            position: relative;
            top: -0.5em;
        }
    }

    .card-left-icon {
        padding: 0.5em 0.5em;
        font-size: 1.5em;
        font-weight: bold;
    }
}

/* Submission history */
#submissions_restrictsize {
    overflow: auto;
    max-height: 223px;
    margin-bottom: 50px;
}

.submission {
    cursor: pointer;
}

/* Codemirror */
.cm-s-default {
    @font-mul: 1;
    font-size: @font-mul*1em;
    line-height: @font-mul*1.5em;
    font-family: 'Source Code Pro', monospace !important;
    background: #fdfdfd;
    color: #181818;

    &.CodeMirror pre {
        font-family: 'Source Code Pro', monospace !important;
    }

    .CodeMirror-gutters {
        background-color: transparent;
        padding-right: 10px;
        z-index: 3;
        border: none;
    }

    .CodeMirror-activeline-background {
        background: #f0fcff;
    }

    .cm-tab {
         background: url();
         background-position: right;
         background-repeat: no-repeat;
    }
}